﻿<cfsilent>
	<cfscript>
		
		/* 四级成绩分布情况 */
		sql = "SELECT 
				scroll, scroll_count 
				FROM mv_scroll_cet_status 
				WHERE exam_id = :examId 
				ORDER BY scroll ";
		
		queryObj = new Query( datasource=application.dnsSlave );
		queryObj.addParam( name="examId", value="CET4", cfsqltype="cf_sql_char" );

		rs_cet4 = queryObj.execute( sql=sql ).getResult();


		/* 六级成绩分布情况 */
		sql = "SELECT 
				scroll, scroll_count 
				FROM mv_scroll_cet_status 
				WHERE exam_id = :examId 
				ORDER BY scroll ";
		
		queryObj = new Query( datasource=application.dnsSlave );
		queryObj.addParam( name="examId", value="CET6", cfsqltype="cf_sql_char" );

		rs_cet6 = queryObj.execute( sql=sql ).getResult();

	</cfscript>
</cfsilent>

<div class="noticeBlock">
	<h3>四六级各分数段学生分布情况</h3>
	<hr/>
</div>

<div id="containerDisposition" style="height:450px; width:740px;"></div>

<script language="javascript" type="text/javascript">
	//<![CDATA[
	<!--

	$(document).ready(function() {
		
		$('#containerDisposition').highcharts({
			
			chart: {
				type: 'scatter',
				zoomType: 'xy'
				},
			colors: ['#4572A7','#AA4643','#89A54E','#80699B'],
			title: {
				text: null
				},
			subtitle: {
				text: null
				},
			xAxis: {
				title: {
					text: null
					}, 
				plotBands: [{ // visualize the passed
					from: 425,
					to: 549,
					color: 'rgba(137, 165, 78, .1)'
					},{ // visualize the good
					from: 550,
					to: 710,
					color: 'rgba(128, 105, 155, .1)'
					}]
				},
			yAxis: {
				title: {
					text: null
					}
				},
			credits: {
				enabled: false
				},
			legend: {
				layout: "vertical",
				align: "left",
				verticalAlign: "top",
				x: 70,
				y: 30,
				floating: true,
				backgroundColor: "#FFFFFF",
				borderWidth: 1
				},
			plotOptions: {
				scatter: {
					marker: {
						radius: 5,
						states: {
							hover: {
								enabled: true,
								lineColor: 'rgb(100,100,100)'
								}
							}
						},
					states: {
						hover: {
							marker: {
								enabled: false
							}
						}
					},
					tooltip: {
						headerFormat: '<b>{series.name}</b><br>',
						pointFormat: '{point.x} 分, {point.y} 人次'
					}
				}
			},
			series: [{
				name: 'CET-4',
				data: [<cfset i = 0 /><cfloop query="rs_cet4"><cfset i++ />[<cfoutput>#rs_cet4.scroll#</cfoutput>, <cfoutput>#rs_cet4.scroll_count#</cfoutput>]<cfif i lt rs_cet4.recordCount>,</cfif></cfloop>]
				},{
				name: 'CET-6',
				data: [<cfset i = 0 /><cfloop query="rs_cet6"><cfset i++ />[<cfoutput>#rs_cet6.scroll#</cfoutput>, <cfoutput>#rs_cet6.scroll_count#</cfoutput>]<cfif i lt rs_cet6.recordCount>,</cfif></cfloop>]
				}]
				
		});
		
	});
	
	// -->
	//]]>
</script>